<template>
  <div class="main section clearfix">
    <el-form :inline="true" style="text-align: left">
      <el-form-item label="关键字查询:">
        <el-input v-model="keyWord" placeholder="字典名称,字典编码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryData">查询</el-button>
        <el-button type="danger" @click="deleteDatas">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        prop="id"
        label="字典id"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dictName"
        label="字典名称"
        min-width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dictCode"
        label="字典编码"
        min-width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="字典描述"
        min-width="200"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        min-width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作"
        min-width="200"
        align="center"
        width="300px"
      >
        <template slot="header">
          <el-button
            size="small"
            type="primary"
            @click="addData"
            v-no-more-click
            >添加字典</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            style="margin-left: 10px; color: #ffa42f"
            type="text"
            size="small"
            @click="reviseData(scope.$index, scope.row)"
            v-no-more-click
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="reviwDic(scope.row)"
            v-no-more-click
            >查看字典</el-button
          >
          <el-popconfirm
            title="确定删除此数据吗？"
            @onConfirm="deleteData(scope.$index, scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              style="color: #fb575e"
              v-no-more-click
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>

    <!--新增/修改的弹框-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
      v-if="dialogVisible"
      :close-on-click-modal="false"
    >
      <OperaData
        :codeId="codeId"
        :dataValue="dataValue"
        :dialogVisible="dialogVisible"
        ref="mySonCom"
        v-on:dialogVisible="closeDialog($event)"
      ></OperaData>
    </el-dialog>
    <!--滑动展示查看字典-->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      :wrapperClosable="false"
    >
      <RviewData
        v-if="drawer"
        :draweVisible="drawer"
        :dicObj="dicobj"
        v-on:draweVisible="closeDrewer($event)"
      ></RviewData>
    </el-drawer>
  </div>
</template>
<script>
import OperaData from "../../components/system/OperaData";
import RviewData from "../../components/system/RviewData";
export default {
  components: {
    OperaData,
    RviewData,
  },
  data() {
    return {
      title: "添加配置",
      codeId: "",
      dicId: "",
      dicobj: [],
      drawer: false,
      dialogVisible: false,
      pagesize: 10,
      current: 1,
      keyWord: "",
      total: 10,
      dataValue: {},
      tableData: [],
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 查询按钮!
    queryData() {
      this.current="1";
      this.getDataList();
    },
    // 清空查询条件!
    deleteDatas() {
      this.keyWord = "";
      this.getDataList();
    },
    //获取数据
    getDataList() {
      this.axios({
        methods: "get",
        url: "sys/dict/page",
        params: {
          pageNo: this.current,
          pageSize: this.pagesize,
          keyWord: this.keyWord,
        },
      }).then((res) => {
        this.tableData = res.data.data.records;
        this.pagesize = res.data.data.size;
        this.current = res.data.data.current;
        this.total = res.data.data.total;
      }),
        (err) => {
          console.log(err);
        };
    },
    //修改数据
    reviseData(index, obj) {
      this.dialogVisible = true;
      this.codeId = obj.id;
      this.dataValue = obj;
      this.title = "修改字典配置";
      setTimeout(() => {
        this.$refs.mySonCom.getItemCode(obj.id);
      }, 10);
    },
    //删除数据
    deleteData(index, obj) {
      this.codeId = obj.id;
      this.axios({
        method: "delete",
        url: "/sys/dict/delete/" + this.codeId,
      }).then(() => {
        this.getDataList(this.current);
      });
    },
    //增加数据
    addData() {
      // this.dataValue = null;
      this.dialogVisible = true;
      this.title = "添加字典编码配置";
      this.codeId = null;
    },
    closeDialog(msg) {
      this.dialogVisible = msg;
      this.getDataList(this.current);
    },
    //查看字典
    reviwDic(obj) {
      this.drawer = true;
      this.dicobj = obj;
    },
    closeDrewer(msg) {
      this.drawer = msg;
    },
    handleCurrentChange(cpage) {
      this.current = cpage;
      this.getDataList(cpage);
    },
    handleSizeChange(psize) {
      this.current = psize;
      this.getDataList(psize);
    },
  },
  mounted() {
    this.getDataList();
  },
};
</script>
<style scoped type="less">
.el-pagination {
  text-align: right;
}
::v-deep .el-table td {
  padding: 10px 0;
}
::v-deep .el-table th {
  padding: 8px 0;
}
::v-deep .el-form--inline .el-form-item__content {
  width: 210px;
  line-height: 42px;
}
::v-deep .el-input__inner {
  height: 32px;
}
::v-deep .el-input__icon {
  line-height: 32px;
}
::v-deep .btn .el-button {
  width: 80px;
  height: 32px;
  line-height: 0;
}
::v-deep .el-table th > .cell {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}
.main {
  position: relative;
}
::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
.title {
  position: absolute;
  left: 0;
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
</style>
